<template>
  <div class="detail-container">
    <el-card class="message-card">
      <!-- 头部区域 -->
      <template #header>
        <div class="header-content">
          <!-- 居中主标题 -->
          <h2 class="main-title">{{ TitleMapping(detailData.type) }}</h2>

          <!-- 子标题行 -->
          <div class="subtitle-row">
            <!-- 左侧子类型 -->
            <div class="left-section">
              <el-tag type="info" size="small">{{ SubTypeMapping(detailData.subType) }}</el-tag>
            </div>
            <!-- 右侧发布时间 -->
            <div class="right-section">
              <span class="time-label">发布时间：</span>
              <span class="time-value">{{ formatTime(detailData.createTime) }}</span>
            </div>
          </div>
        </div>
      </template>

      <!-- 内容区域 -->
      <div class="content-box">
        {{ detailData.content }}
        <!-- 预留扩展区域 -->
        <div class="extra-content"></div>
      </div>

      <!-- 操作按钮 -->
      <div class="actions">
        <el-button type="primary" @click="handleBack">返回列表</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import {getCurrentInstance, ref, onMounted} from 'vue'
import dayjs from 'dayjs'
import {getMessageDetail} from "@/api/messageCenter/messageCenter.js";
import {TypeMapping} from "@/constants/message.js";

const {proxy} = getCurrentInstance()

// 数据初始化
const detailData = ref({})
const messageId = ref(0)

// 标题映射
const TitleMapping = (type) => {
  return TypeMapping.MessageType[type] || '未知类型'
}
// 子类型映射
const SubTypeMapping = (subType) => {
  return TypeMapping.SubType[subType] || '未知子类'
}

// 时间格式化
const formatTime = (timeStr) => {
  return dayjs(timeStr).format('YYYY-MM-DD HH:mm')
}

// 返回列表
const handleBack = () => {
  proxy.$router.push('/message-center')
}

onMounted(() => {
  messageId.value = proxy.$route.query.messageId;
  try {
    getMessageDetail(messageId.value).then(res => {
      detailData.value = res.data
    })
  } catch (error) {
    console.error('获取详情失败:', error)
  }
})
</script>

<style scoped lang="scss">
.detail-container {
  padding: 24px;
  background: #f8f9fc; // 心理测评系统常用浅蓝背景

  .message-card {
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(94, 129, 244, 0.1); // 专业蓝色系阴影

    :deep(.el-card__header) {
      background: linear-gradient(135deg, #f5f7ff 0%, #ebf0ff 100%); // 渐变背景
      border-bottom: 1px solid #e4e7ed;
    }

    .header-content {
      .main-title {
        text-align: center; // 主标题居中[2](@ref)
        color: #1a2b5f; // 深蓝色
        font-size: 24px;
        margin: 0 0 16px 0;
        font-weight: 600;
        letter-spacing: 0.5px;
      }

      .subtitle-row {
        display: flex;
        justify-content: space-between; // 左右布局[5](@ref)
        align-items: center;
        padding: 0 20px;
        margin-top: 12px;

        .left-section {
          display: flex;
          align-items: center;
          gap: 12px;

          .el-tag {
            background: #e8f4ff; // 标签背景色
            color: #2d6ddf; // 品牌主色
            border-color: #c2d9ff;
            height: 28px;
          }

          .type-text {
            color: #6b778c;
            font-size: 14px;
            font-weight: 500;
          }
        }

        .right-section {
          display: flex;
          align-items: center;
          gap: 8px;

          .time-label {
            color: #909399;
            font-size: 13px;
          }

          .time-value {
            color: #4a5568;
            font-size: 14px;
            font-weight: 500;
          }
        }
      }
    }

    .content-box {
      padding: 32px;
      line-height: 1.8;
      color: #4a5568;
      min-height: 300px;
      //background: url('~@/assets/images/psych-bg.png') no-repeat right bottom/200px;

      .extra-content {
        margin-top: 30px;
        border-top: 1px dashed #e4e7ed;
        padding-top: 20px;
      }
    }

    .actions {
      padding: 24px;
      text-align: center;

      .el-button {
        padding: 12px 40px;
        border-radius: 8px;
        transition: all 0.3s;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(47, 84, 235, 0.2);
        }
      }
    }

    @media (max-width: 768px) {
      :deep(.el-card__header) {
        padding: 16px;
      }

      .header-content {
        .main-title {
          font-size: 20px;
        }

        .subtitle-row {
          flex-direction: column;
          gap: 12px;
          align-items: stretch;

          .left-section {
            justify-content: flex-start;
          }

          .right-section {
            justify-content: space-between;
          }
        }
      }

      .content-box {
        padding: 24px;
        background-size: 150px;
      }
    }
  }
}
</style>
